<template>
  <div>
    <h1>这是Child组件</h1>
    <button @click="send">传值给父组件</button>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'Child',
  // 接收父组件传递过来的参数
  props: {
    msg: {
      type: String,
      // required: true, 默认false
      defalue: '默认值'
    }
  },
  setup (props, ctx) {
    console.log(props.msg);
    let childMsg = ref('子组件数据')
    let send = () => {
      // 通过ctx.emit分发事件
      ctx.emit('send', childMsg.value)
      // 如果有多个参数，可以传递数组或者是一个对象
      ctx.emit('send', [childMsg.value, 10])
      ctx.emit('send', {
        msg: childMsg.value,
        num: 20
      })
    }
    return {
      childMsg,
      send
    }
  }
})
</script>
